<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>admin管理</title>
        <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12" />
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    </head>
    <body class="pear-container">

    <!-- 顶部查询表单 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form top-search-from">

                <div class="layui-form-item">
                    <label class="layui-form-label">表名</label>
                    <div class="layui-input-block">
                        <input type="text" name="table_name" id="table_name" placeholder="请输入表名" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label"></label>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                        <i class="layui-icon layui-icon-search"></i>查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
                        <i class="layui-icon layui-icon-refresh"></i>重置
                    </button>
                </div>
                <div class="toggle-btn">
                    <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                    <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
                </div>

            </form>
        </div>
    </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table"></table>
            </div>
        </div>

        <script type="text/html" id="table-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="app.admin.table.create">
                <i class="layui-icon layui-icon-add-1"></i>创建表格
            </button>
            <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="app.admin.table.drop">
                <i class="layui-icon layui-icon-delete"></i>删除表格
            </button>
        </script>

        <script type="text/html" id="table-bar">
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="app.admin.table.modify">编辑</button>
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="app.admin.table.drop">删除</button>
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="crud" permission="app.admin.table.crud">一键菜单</button>
        </script>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/common.js"></script>

        <script>

            // 相关接口
            const SELECT_API = "/app/admin/table/show";
            const DROP_API = "/app/admin/table/drop";
            const VIEW_URL = "/app/admin/table/view";
            const CREATE_URL = "/app/admin/table/create";
            const MODIFY_URL = "/app/admin/table/modify";
            const CRUD_URL = "/app/admin/table/crud";

            layui.use(["table", "form", "common", "popup"], function() {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.$;
                let common = layui.common;

                let cols = [
                    {
                        type: "checkbox"
                    }, {
                        title: "表名",
                        field: "TABLE_NAME",
                        templet: function (d) {
                            return '<a class="tab-link" src="' + VIEW_URL + '?table=' + d.TABLE_NAME + '">' + d.TABLE_NAME + '</a>';
                        }
                    },
                    {
                        title: "备注",
                        field: "TABLE_COMMENT",
                    },
                    {
                        title: "记录数",
                        field: "TABLE_ROWS",
                        width: 100,
                    },
                    {
                        title: "引擎",
                        field: "ENGINE",
                        width: 100,
                    },
                    {
                        title: "字符集",
                        field: "TABLE_COLLATION",
                    },
                    {
                        title: "创建时间",
                        field: "CREATE_TIME",
                    },
                    {
                        title: "操作",
                        toolbar: "#table-bar",
                        align: "center",
                        width: 200
                    }
                ];

                table.render({
                    elem: "#data-table",
                    url: SELECT_API,
                    page: true,
                    cols: [cols],
                    skin: "line",
                    size: "lg",
                    toolbar: "#table-toolbar",
                    defaultToolbar: [{
                        title: "刷新",
                        layEvent: "refresh",
                        icon: "layui-icon-refresh",
                    }, "filter", "print", "exports"]
                });

                $(document).on("click", ".tab-link", function () {
                    let obj = $(this);
                    let table = obj.html();
                    let url = obj.attr("src");
                    parent.layui.admin.addTab(table , table + "表", url);
                })

                table.on("tool(data-table)", function(obj) {
                    if (obj.event === "remove") {
                        remove(obj);
                    } else if (obj.event === "edit") {
                        edit(obj);
                    } else if (obj.event === "crud") {
                        crud(obj);
                    }
                });

                table.on("toolbar(data-table)", function(obj) {
                    if (obj.event === "add") {
                        add();
                    } else if (obj.event === "refresh") {
                        refreshTable();
                    } else if (obj.event === "batchRemove") {
                        batchRemove(obj);
                    }
                });

                form.on("submit(table-query)", function(data) {
                    table.reload("data-table", {
                        page: {
                            curr: 1
                        },
                        where: data.field
                    })
                    return false;
                });

                let add = function() {
                    layer.open({
                        type: 2,
                        title: "创建表格",
                        shade: 0.1,
                        maxmin: true,
                        area: [common.isModile()?"100%":"98%", common.isModile()?"100%":"95%"],
                        content: CREATE_URL
                    });
                }

                let edit = function(obj) {
                    let table = obj.data.TABLE_NAME;
                    layer.open({
                        type: 2,
                        title: "修改表格",
                        shade: 0.1,
                        maxmin: true,
                        area: [common.isModile()?"100%":"98%", common.isModile()?"100%":"95%"],
                        content: MODIFY_URL + "?table=" + table
                    });
                }

                let crud = function(obj) {
                    let table = obj.data.TABLE_NAME;
                    layer.open({
                        type: 2,
                        title: "一键菜单",
                        shade: 0.1,
                        maxmin: true,
                        area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"500px"],
                        content: CRUD_URL + "?table=" + table
                    });
                }

                let remove = function(obj) {
                    return doRemove([obj.data.TABLE_NAME]);
                }

                let batchRemove = function(obj) {
                    var tables = common.checkField(obj, "TABLE_NAME");
                    if (tables === "") {
                        layui.popup.warning("未选中数据");
                        return false;
                    }
                    doRemove(tables.split(","));
                }

                let doRemove = function (tables) {
                    layer.confirm("确定删除?", {
                        icon: 3,
                        title: "提示"
                    }, function(index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: DROP_API,
                            data: {tables: tables},
                            dataType: "json",
                            type: "post",
                            success: function (res) {
                                layer.close(loading);
                                if (res.code) {
                                    return layui.popup.failure(res.msg);
                                }
                                return layui.popup.success("操作成功", refreshTable);
                            }
                        })
                    });
                }

                window.refreshTable = function(param) {
                    table.reloadData("data-table", {
                        scrollPos: "fixed"
                    });
                }
            })

            // 获取选择组件配置项
            function getControlProps(control_args)
            {
                if (!control_args) {
                    return {};
                }
                let props = {};
                let split = control_args.split(";");
                for (let item of split) {
                    let pos = item.indexOf(":");
                    if (pos === -1) continue;
                    let name = item.substring(0, pos).trim();
                    let values = item.substring(pos + 1).trim();

                    // values = a:v,c:d
                    pos = values.indexOf(":");
                    if (pos !== -1) {
                        let options = values.split(",");
                        values = {};
                        for (const option of options) {
                            let [value, name] = option.split(":");
                            values[value] = name;
                        }
                    }
                    props[name] = values;
                }
                return props;
            }

        </script>
    </body>
</html>
